<template>
  <div class="detail" ref="CarOrderDetail">
    <div class="detail_top">
      <van-nav-bar fixed @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" color="#fff" size="16" />
        </template>
        <template #title>
          <div class="detail_top_title">订单填写 - {{detail.is_because == '1' ?　"因公" : "因私"}}</div>
        </template>
      </van-nav-bar>
    </div>
    <div class="detail_card">
      <div class="_card_card">
        <div class="content">
          <div class="top">
            <div class="top_1">
              {{
                detail.service_type == 1
                  ? "实时单"
                  : detail.service_type == 2
                  ? "预约单"
                  : detail.service_type == 3
                  ? "接机"
                  : detail.service_type == 4
                  ? "送机"
                  : ""
              }}
            </div>
            <div class="top_2">{{ detail.start_name }}</div>
            <div class="top_3">{{ detail.PAGE_car_source_name }}</div>
          </div>
          <div class="midle">
            <div class="midle_2">
              <div class="midle_2_l">
                <div class="midle_2_l_c"></div>
              </div>
              <div>{{ detail.start_address }}</div>
            </div>
            <div class="midle_line"></div>
            <div class="midle_3">
              <div class="midle_3_l">
                <div class="midle_3_l_c"></div>
              </div>
              <div>{{ detail.end_address }}</div>
            </div>
            <div class="midle_1">
              <div class="midle_1_l"><van-icon name="clock" /></div>
              <div>{{ detail.departure_time }} 用车</div>
            </div>
          </div>
          <!-- <div class="midle_time_kilometre">
            <p>全程{{ detail.total_mileage }}公里</p>
            <p class="midle_time_">用时{{ detail.total_time }}分钟</p>
          </div> -->
        </div>
        <!-- <div class="foot">
          <div class="foot_flight">
            <div class="foot_flight_l"><van-icon name="clock" /></div>
            <div>航班抵达后免费等待1小时</div>
          </div>
          <div class="foot_tips">
            <div class="foot_tips_l">
              退改
            </div>
            <p class="foot_tips_r">
              2021-11-11 13:50可免费取消，超时将收取订单100%费用
            </p>
          </div>
        </div> -->
      </div>
    </div>
    <div class="detail_taker">
      <div class="detail_taker_title">
        乘车人
      </div>
      <div class="detail_taker_detail">
        <p>
          <span class="_taker_detail_p1">{{ detail.passenger_name }}</span
          ><span class="_taker_detail_p2">{{ detail.dept_name }}</span>
        </p>
        <p>
          <span>手机号：</span><span>{{ detail.passenger_phone }}</span>
        </p>
      </div>
    </div>
    <div class="detail_proj" v-if="detail.is_because == '1'">
      <van-field
        v-if="userConfig.car_cost_center != '2'"
        @click="click_costCenter"
        disabled
        v-model="detail.cost_center_name"
        label="成本中心："
        placeholder="请选择成本中心"
        right-icon="arrow"
        input-align="right"
      />
      <van-field
        v-if="userConfig.car_project != '2'"
        @click="click_project"
        disabled
        v-model="detail.project_name"
        label="项目："
        placeholder="请选择项目"
        right-icon="arrow"
        input-align="right"
      />
      <van-field
        v-if="userConfig.car_travel_matter != '2'"
        v-model="detail.remark"
        label="差旅事项："
        placeholder="请输入差旅事项"
        input-align="right"
      />
      <template v-if="detail.overproof == '1'">
        <van-field
          v-model="detail.over_reason"
          label="超标原因："
          right-icon="arrow"
          placeholder="请输入超标原因"
        />
      </template>
    </div>
    <div class="detail_linkman">
      <van-field
        v-model="detail.contacts_name"
        label="联系人："
        placeholder="请输入名称"
        input-align="right"
      />
      <van-field
        v-model="detail.contacts_phone"
        label="手机号："
        placeholder="请输入联系方式"
        input-align="right"
      />
    </div>
    <div class="footer_nav">
      <div class="footer_nav_l">
        <span class="price-name">预估金额：</span>
        <span class="_nav_l_symbol">￥</span>
        <span class="_nav_l_price">{{ detail.estimate_price }}</span>
      </div>
      <div class="footer_nav_r">
        <div class="_nav_r_call" @click="createOrder">叫车</div>
      </div>
    </div>
    <!--差旅项目-->
    <transition name="van-slide-right">
      <CheckProject
        v-if="isOpenProject"
        @getProjectData="getProjectData"
        v-model:isOpenProject="isOpenProject"
        :memberIds="detail.passenger_id"
      />
    </transition>
    <!--成本中心-->
    <transition name="van-slide-right">
      <CheckCostCenter
        v-if="isOpenCostCenter"
        @getCostCenterData="getCostCenterData"
        @closeCostCenterData="closeCostCenterData"
        :isOpenCostCenter="isOpenCostCenter"
      />
    </transition>
  </div>
</template>

<script>
import { Toast } from "vant";
import CheckProject from "/@/components/CheckProject/CheckProject.vue";
import CheckCostCenter from "/@/components/CheckCostCenter/CheckCostCenter.vue";
import { format } from "date-fns";
export default {
  name: "",
  components: { CheckProject, CheckCostCenter },
  created() {
    const searchParam = this.$store.state.searchParam;
    const carInfo = this.$store.state.carInfo;
    let searchType = searchParam.searchType;

    if (
      JSON.stringify(searchParam) === "{}" ||
      JSON.stringify(carInfo) === "{}"
    ) {
      this.$router.push({
        path: "/home"
      });
      return;
    }
    const timeDifference =
      Math.ceil(
        (new Date(searchParam.departure_time.replace(/-/g, "/")).getTime() -
          new Date(searchParam.flt_takeoff_time.replace(/-/g, "/")).getTime()) /
          10000
      ) * 10; // 计算时间差 并且向上取整
    this.detail = {
      // "book_id": "", // 预订人ID（取登陆人）
      // "book_name": "", // 预订人姓名（取登陆人）
      // "company_id": "", // 公司id（取登陆人）
      // "pay_type": "", // 支付方式 0：在线支付1：月结(HB) 2：线下支付（支付之后用到的  目前用不上支付了才知道）
      /** 人员信息 */
      contacts_name: searchParam.mans.member_name || "", // 联系人名称
      contacts_phone: searchParam.mans.member_phone || "", // 联系人电话
      contacts_id: searchParam.mans.member_id || "", // 联系人id
      passenger_name: searchParam.mans.member_name || "", // 乘车人姓名
      passenger_phone: searchParam.mans.member_phone || "", // 乘车人电话
      passenger_id: searchParam.mans.member_id || "", // 乘车人id
      dept_name: searchParam.mans.department_name || "", // 部门名称
      dept_id: searchParam.mans.department_id || "", // 部门id
      // cost_center_name: searchParam.mans.cost_name || "", // 成本中心名称
      // cost_center_id: searchParam.mans.cost_center_id || "", // 成本中心id
      /** 出发地 */
      start_city_district: searchParam.from_address_ALL.code || "", // 出发城市区号
      flat: searchParam.from_address_ALL.flat || "", // 出发地纬度
      flng: searchParam.from_address_ALL.flng || "", // 出发地经度
      start_name: searchParam.from_address_ALL.name || "", // 出发地名称
      start_address: searchParam.from_address_ALL.address || "", // 出发地详细地址
      /** 目的地 */
      end_city_district: searchParam.to_address_ALL.code || "", // 到达城市区号
      tlat: searchParam.to_address_ALL.flat || "", // 目的地纬度
      tlng: searchParam.to_address_ALL.flng || "", // 目的地经度
      end_name: searchParam.to_address_ALL.name || "", // 目的地名称
      end_address: searchParam.to_address_ALL.address || "", // 目的地详细地址
      /** 关于接送机（航班信息） */
      air_code: searchParam.air_code || "", // 航班号，如果是接机订单，则是必须的
      flt_takeoff_time: searchParam.flt_takeoff_time || "", // 航班到达时间，如果是接机订单，则是必须的
      departure_air_port_code: searchParam.flight_depcode || "", // 出发机场三字码，如果是接机订单，则是必须的
      flight_delay_time: timeDifference || "", // 航班到达后多少分钟出发，只能取10-90之间，10的整数倍数字
      arrive_air_port_code: searchParam.flight_arrcode || "", // 接机机场三字码，如果是接机订单，则是必须的
      /** 车辆相关信息 */
      service_type: searchType || "", // 用车类型 1:实时 2:预约 3:接机 4送机
      require_level: carInfo.car_level || "", // 车型 1：经济 2：舒适 3：豪华 4：商务车 9:优享型
      dynamic_code: carInfo.dynamic_code || "", // 预估价动态码  dynamic_code
      estimate_price: carInfo.estimate_price || "", // 预估价
      car_source_name: carInfo.car_source || "", // 平台名称
      car_source: carInfo.car_source_id || "", // 平台码 // car_source_id
      PAGE_car_source_name: carInfo.car_source || "", // 这个是不需要存的   页面展示名字用
      /** 申请单信息 */
      apply_no: searchParam.approvers.apply_no || "", // 申请单号
      apply_detail_id: searchParam.approvers.id || "", //申请单明细id
      travel_city_name: "", // 出差城市名称（审批单上面带出来的）
      /** 其他信息 */
      overproof: carInfo.overproof || "0", // 是否超标，0：未超标，1：超标 overproof
      booking_channel: "5", //预定渠道 1、电话 2、微信 3、QQ 4、PC端 5、APP端
      departure_time:
        searchParam.departure_time || format(new Date(), "yyyy-MM-dd HH:mm:ss"), // 出发时间 yyyy-MM-dd HH:mm:ss
      is_because: searchParam.is_because || "2", // 1:因公 2:因私
      /** 预定页面可能需要填写的参数 （因私不需要这些玩意） */
      project_name: "", // 项目名称
      project_id: "", // 项目id
      over_reason: "", // 超标原因
      remark: "" // 差旅事项
    };
    // 是否自动带入成本中心
    if (this.userConfig.car_cost_center_substitut == "1") {
      this.detail.cost_center_name = searchParam.mans.cost_name || ""; // 成本中心名称
      this.detail.cost_center_id = searchParam.mans.cost_center_id || ""; // 成本中心id
    }
  },
  data() {
    return {
      isOpenProject: false,
      isOpenCostCenter: false,
      userConfig: this.$store.state.configureInfo,
      searchParam: {},
      carInfo: {},
      detail: {}
    };
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
    valiData() {
      // 下单前的数据验证
      const vali = [];
      const dt = this.detail,
        us = this.userConfig;
      if (!dt.contacts_name) {
        vali.push("联系人不能为空， 请核实！");
      }
      if (!dt.contacts_phone) {
        vali.push("联系人电话不能为空， 请核实！");
      }
      if (dt.is_because != "1") return vali;
      // 因私没有下面这些校验
      // 项目
      if (us.car_project == "0" && (!dt.project_name || !dt.project_id)) {
        vali.push("项目不能为空， 请核实！");
      }
      // 成本中心
      if (
        us.car_cost_center == "0" &&
        (!dt.cost_center_name || !dt.cost_center_id)
      ) {
        vali.push("成本中心不能为空， 请核实！");
      }
      // 差旅事项
      if (us.car_travel_matter == "0" && !dt.remark) {
        vali.push("差旅事项不能为空， 请核实！");
      }
      // 超标，并且超标原因必填，并且超标原因不存在的时候
      if (
        dt.overproof == "1" &&
        us.car_reason_violation == "0" &&
        !dt.over_reason
      ) {
        vali.push("超标原因不能为空，请核实");
      }
      return vali;
    },
    async createOrder() {
      const vali = this.valiData();
      if (vali.length) {
        Toast(vali[0]);
        return;
      }
      const res = await this.$axiosJson(
        "/security/v1/icardcOrder/createOrder",
        this.detail
      );
      const data = res.data || {};
      if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
        if (!data.order_id) {
          Toast("订单创建失败！");
          return;
        }
        this.$router.push({
          path: "/orderMap",
          query: {
            order_id: data.order_id,
            create_order: 1
          }
        });
      } else {
        Toast(data.error_message || res.ret_msg || "订单创建失败！");
      }
    },
    // 点击项目
    click_project() {
      this.isOpenProject = true;
    },
    click_costCenter() {
      /** 如果成本中心设置为了自动从出行人带出，
       * 1: 那么当出行人没有默认成本中心的时候可以选择
       * 2：当出行人有成本中心的时候不可以再选成本中心*/
      if (
        this.userConfig.car_cost_center_substitut == "1" &&
        this.detail.cost_center_name &&
        this.detail.cost_center_id
      ) {
        Toast("默认为乘车人的成本中心，不可修改！");
        return;
      }
      this.isOpenCostCenter = true;
    },
    closeCostCenterData() {
      this.isOpenCostCenter = false;
    },
    getCostCenterData(val) {
      this.detail.cost_center_name = val.text || ""; // 成本中心名称
      this.detail.cost_center_id = val.id || ""; // 成本中心id
    },
    getProjectData(val) {
      // 获取项目数据
      this.detail.project_name = val.project_name;
      this.detail.project_id = val.id;
      this.isOpenProject = false;
    }
  }
};
</script>
<style lang="less" scoped>
.detail {
  padding-bottom: 50px;
  .detail_top {
    // color: #fff;
    // background-color: #f0f;
    padding-top: 46px;

    :deep(.van-nav-bar__content) {
      background-color: #3296fa;
      color: #ffffff;
      font-weight: 600;
      .detail_top_title {
        font-size: 16px;
        color: #ffffff;
        font-weight: 600;
      }
      .detail_top_agin {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
  .detail_card {
    padding: 10px 10px 0 10px;
    ._card_card {
      background-color: #fff;
      border-radius: 7px;
      .content {
        border-top: 1px solid transparent;
        border-bottom: 1px dashed #f2f2f2;
        position: relative;
        .top {
          display: flex;
          align-items: center;
          padding-left: 15px;
          font-size: 14px;
          margin-top: 15px;
          .top_1 {
            font-size: 12px;
            font-weight: 500;
            color: #717171;
            line-height: 12px;
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px solid #c3c3c3;
            margin-right: 6px;
          }
          .top_2 {
            color: #3a3a3a;
            margin-right: 6px;
            font-weight: 600;
          }
          .top_3 {
            color: #666666;
            font-weight: 600;
          }
        }
        .midle {
          padding: 16px;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          .midle_1 {
            display: flex;
            .midle_1_l {
              width: 9px;
              height: 9px;
              margin-right: 10px;
            }
          }
          .midle_2 {
            display: flex;
            align-items: center;
            .midle_2_l {
              margin-right: 8px;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #08c183;
              display: flex;
              justify-content: center;
              align-items: center;
              .midle_2_l_c {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fff;
              }
            }
          }
          .midle_3 {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .midle_3_l {
              margin-right: 8px;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background: #f85544;
              display: flex;
              justify-content: center;
              align-items: center;
              .midle_3_l_c {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fff;
              }
            }
          }
          .midle_line {
            height: 15px;
            border-left: 1px solid #d8d8d8;
            margin: 1px 0 1px 6px;
          }
        }
        .midle_time_kilometre {
          position: absolute;
          right: 15px;
          bottom: 15px;
          font-size: 13px;
          font-weight: 500;
          color: #666666;
          text-align: right;
          .midle_time_ {
            margin-top: 9px;
          }
        }
      }
      .foot {
        padding: 15px;
        font-size: 13px;
        font-weight: 600;
        color: #3a3a3a;
        .foot_flight {
          display: flex;
          color: #08c183;
          margin-bottom: 15px;
          .foot_flight_l {
            margin-right: 8px;
          }
        }
        .foot_tips {
          height: 53px;
          background: #f9fafb;
          border-radius: 6px;
          padding: 12px 8px;
          display: flex;
          .foot_tips_l {
            width: 32px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            background: rgba(254, 143, 0, 0.06);
            border-radius: 2px;
            border: 1px solid #f5a623;
            font-size: 11px;
            font-weight: 500;
            color: #fe8f00;
            margin-right: 5px;
          }
          .foot_tips_r {
            font-weight: 500;
            font-size: 11px;
            line-height: 15px;
          }
        }
      }
    }
  }
  .detail_taker {
    background-color: #fff;
    padding: 15px 15px 6px 15px;
    margin: 10px 0 10px 0;
    .detail_taker_title {
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 15px;
    }
    .detail_taker_detail {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      border-top: 1px solid rgba(242, 242, 242, 0.74);
      padding-top: 14px;
      p {
        margin-bottom: 15px;
      }
      ._taker_detail_p1 {
        font-size: 14px;
        font-weight: 600;
        margin-right: 10px;
      }
      ._taker_detail_p2 {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
      }
    }
  }
  .detail_linkman {
    background-color: #fff;
    margin: 0 0 10px;
  }
  .detail_proj {
    background-color: #fff;
    margin: 0 0 10px;
  }
  .footer_nav {
    background-color: #fff;
    width: 100%;
    height: 50px;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.21);
    div {
      width: 50%;
      text-align: center;
      line-height: 50px;
    }
    .footer_nav_l {
      display: flex;
      align-items: center;
      padding-left: 10px;
      .price-name {
        font-size: 14px;
        color: #999999;
      }
      ._nav_l_symbol {
        font-size: 14px;
        color: #ef6e33;
      }
      ._nav_l_price {
        font-size: 20px;
        font-weight: 600;
        color: #ef6e33;
        margin: 0 5px 0 0;
      }
      ._nav_l_search {
        font-size: 14px;
        font-weight: 500;
        color: #208cff;
        cursor: pointer;
      }
    }
    .footer_nav_r {
      display: flex;
      justify-content: flex-end;
      div {
        width: 50%;
        height: 100%;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
      }
      ._nav_r_order {
        background: #208cff;
        cursor: pointer;
      }
      ._nav_r_call {
        background: #fe8f00;
        cursor: pointer;
      }
    }
  }
}
:deep(.van-field__control) {
  color: #323233 !important;
  -webkit-text-fill-color: unset;
}
:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc !important;
}
:deep(.van-cell__title) {
  color: #666666 !important;
}
</style>
